import React, { useEffect, memo } from 'react';
import { Drawer, Button } from 'antd';
import type { DrawerProps } from 'antd/lib/drawer';
import icon_close from '@/assets/icons/icon-close-2.png';
import styles from './drawer.less';
import pub_btn from '@/styles/button.less';
import cn from 'classnames';
import { listenScroll } from '@/utils/utils';
// import { listenScroll } from '@/utils/utils'

import _ from '@umijs/deps/compiled/lodash';
import { CSSProperties } from '@umijs/renderer-react/node_modules/@types/react';

interface Props extends DrawerProps {
  okText?: string;
  cancelText?: string;
  type?: string;
  onOk?: () => void;
  isSave?: boolean;
  handleSubmit?: () => void;
  footer?: any;
  classNames?: any;
  hideCancel?: boolean;
  disabledLeft?: boolean;
  disabledRight?: boolean;
  bodyStyle?: CSSProperties;
  destroyOnClose?: boolean;
  loading?: boolean;
  cancelLoading?: boolean;
  hasModalBefore?: boolean;
  mask?: boolean;
  sendMsgOrNot?: boolean; // 是否向上发消息记录遮罩
  leftFootBtn?: any; // 底部左侧内容
}

const SideDrawer = memo((props: Props) => {
  const {
    onClose,
    visible,
    title,
    contentWrapperStyle,
    okText,
    cancelText,
    onOk,
    children,
    isSave,
    handleSubmit,
    footer,
    classNames,
    hideCancel,
    disabledLeft,
    disabledRight,
    bodyStyle,
    destroyOnClose = true,
    loading,
    cancelLoading,
    hasModalBefore,
    sendMsgOrNot = true,
    mask,
    leftFootBtn,
  } = props;
  useEffect(() => {
    // console.log('sendMsgOrNot.............................', sendMsgOrNot);

    if (!sendMsgOrNot) return;
    // console.log(visible, '-------------visible1', title);
    if (visible) {
      top.postMessage({ open: true }, location.origin);
      const doms = document.getElementsByClassName('ant-drawer-body');
      Array.from(doms).map((dom) => {
        dom.classList.add('scroll-hidden');
        listenScroll(dom);
      });
      // if(hasModalBefore){
      //   //如果是先出modal再出drawer则直接将drawer遮罩隐藏

      // }
      // handleDrawerMaskDisplay(true);
      // console.log(visible, '----------------visible----true1----');
    } else {
      // handleDrawerMaskDisplay(false);
      // debugger;
      top.postMessage({ open: false }, location.origin);
      // console.log(visible, '--------------------false  222----');
    }
  }, [visible, sendMsgOrNot]);

  useEffect(() => {
    return () => {
      // handleDrawerMaskDisplay(false);
      if (!sendMsgOrNot) return;
      // debugger;
      top.postMessage({ open: false }, location.origin);
      // console.log(visible, '--------------------false  3333----');
    };
  }, []);

  return (
    (<Drawer
      // mask={false}
      mask={mask || mask === false ? mask : true}
      title={title}
      placement="right"
      onClose={onClose}
      destroyOnClose={destroyOnClose}
      open={visible}
      closeIcon={<img src={icon_close} alt="close" />}
      rootClassName={cn(styles.cusDrawer, classNames)}
      maskClosable={false} // ui说只有点击叉号才给隐藏 10-28
      contentWrapperStyle={contentWrapperStyle}
      bodyStyle={{
        minWidth: 1030,
        ...bodyStyle,
      }}
      width={'100%'}
      push={false}
      footer={
        footer ? (
          footer
        ) : (
          <div rootClassName={styles.drawerFooter}>
            {leftFootBtn || <div key="leftbtn"></div>}
            <div>
              <Button
                key="submit"
                rootClassName={cn(pub_btn.btn_red, styles.btn)}
                onClick={onOk}
                rootStyle={{ marginRight: 8 }}
                disabled={disabledLeft}
                loading={loading}
              >
                {okText || '确认'}
              </Button>
              {hideCancel ? (
                ''
              ) : (
                <Button
                  rootStyle={{ width: 80 }}
                  key="reset"
                  rootClassName={cn(pub_btn.btn_border_red, pub_btn.btn_border_bold)}
                  onClick={isSave ? handleSubmit : onClose}
                  disabled={disabledRight}
                  loading={cancelLoading}
                >
                  {cancelText || '取消'}
                </Button>
              )}
            </div>
          </div>
        )
      }
    >
      {children}
    </Drawer>)
  );
});

export default SideDrawer;
